<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta http-equiv="Pragma" content="no-cache" />
    <title>订单详情</title>
    <link rel="stylesheet" href="css/weui.min.css" />
    <link rel="stylesheet" href="css/style.css" />
    <script src="js/jquery-2.2.3.min.js"></script>
    <script type="text/javascript" src="http://static.runoob.com/assets/qrcode/qrcode.min.js"></script>

</head>
<style>
    .weui-loadmore {
        width: 100%;
        height: 100%;
        font-size: 14px;
        text-align: center;
        position: absolute;
        background: #20A0FF;
        z-index: 999;
        color: #fff;
        margin: 0px;
        line-height: 500px;
    }

    .weui-loading {
        width: 40px;
        height: 40px;
    }
</style>

<body ontouchstart>
    <div class="loading" style="display:none;">
        <div class="weui-loadmore">
            <i class="weui-loading"></i>
        </div>
    </div>
    <div class="weui-content" style="width:100%;height:100%;">
        <div class="conten-box" style="width:100%;height:100%;background:#20A0FF;">
            <div class="detail-box" style="width:340px;border:1px solid transparent;margin:auto;">
                <!-- 订单详情头部信息 -->
            </div>
        </div>
        <!-- 退款码部分 -->
        <div class="refund-code" style="width:100%;height:100%;position:fixed;top:0px;left:0px;z-index:99;background:rgba(159,159,159,0.68);display: none;">
            <div class="content-box" style="position: relative;">
                <div class="code" style="width:340px;height:376px;border-radius:8px;margin: 40px auto;">
                    <div class="title" style="height:43px;background:#F44831;line-height: 43px;text-align: center;color:rgba(255,255,255,1);">退款二维码</div>
                    <div style="height:353px;background: #fff;border: 1px solid transparent;">
                        <div style="width:236px;height:230px;background:#ccc;margin:20px auto;" id="qrcode"></div>
                        <div style="width:200px;height:22px;font-size:16px;color:#F44831;margin:16px auto;text-align: center;">请到食堂窗口出示二维码</div>
                        <div style="width:200px;height:17px;color:#9F9F9F;font-size: 12px;margin: -7px auto;text-align: center;">退款金额将原路返回</div>
                    </div>
                </div>
                <img src="./images/close-button.png" alt="" style="position:absolute;top:-10px;right:24px;" class="close-button">
            </div>
        </div>
    </div>
    <script src="./api.js"></script>
    <script>
        window.onload = function () {
            $('.loading').css('display', 'block');
            let api = getApi();
            //获取本地缓存的用户信息
            let userinfo = JSON.parse(localStorage.getItem('wxUserInfo')).data;
            let token = userinfo.token;

            //截取orderID(订单号) 发送请求获取详情
            let href = window.location.href;
            let orderIDstr = href.split('?')[1];
            let orderID = orderIDstr.split('=')[1];

            //发送请求
            fetch(`${api}/consumingRecords/${orderID}`, {
                method: "get",
                headers: {
                    'Content-type': 'application/json',
                    "Authorization": token
                }
            })
                .then(res => res.json())
                .then((data) => {
                    if (data.state == true) {
                        let orderMsg = data.data[0]
                        let foodList = ''
                        //判断是否具有note
                        if (orderMsg.note) {
                            let foodListAttr = orderMsg.note.split(',');
                            foodListAttr.forEach((item) => {
                                foodList += `<div class="food-list" position="relative">
                                            <span class="food-name" style="margin:12px 20px;color:#9F9F9F;font-size:16px;">${item.split('-')[0]}</span>
                                            <span style="color:#9F9F9F;font-size:16px;position: absolute; left:160px;">${item.split('-')[1]}</span>
                                            <span style="color:#9F9F9F;font-size:16px;float: right;margin-right: 56px;">${item.split('-')[2]}</span>
                                        </div>`
                            });
                        }

                        let html = '';
                        html += `<div class="title" style="height: 50px; background: #FBFBFB;border-radius:4px 4px 0px 0px;margin-top: 40px;border-bottom:1px solid rgba(238,238,238,1);">
                                    <div class="icon-title">
                                        <img src="./images/success-tips.png" alt="" style="margin:17px 20px;">
                                        <span style="font-size:18px;color:#333;line-height: 50px;font-weight:bold;">订单详情</span>
                                    </div>
                                </div>
                                <div class="order-detail" style="min-height:80px;background:rgba(255,255,255,1);border-bottom:1px solid rgba(238,238,238,1);">
                                <div class="order-detail-titie" style="margin:0px 0px 0px 20px; font-size:16px;color:#333333;font-weight:bold;">
                                    订单信息
                                </div>

                                ${foodList}

                                <div class="time" style="color:#9F9F9F;font-size:10px;margin: 13px 20px;">${orderMsg.operateTime}</div>
                                    <div class="canteen-name" style="margin:7px 20px;font-size:10px;font-size: #333;font-family:PingFang SC;">
                                        ${orderMsg.canteenName}
                                        ${orderMsg.windowName}
                                    </div>
                                </div>
                                <div class="order-foot" style="height: 180px;background:rgba(255,255,255,1);border-radius:0px 0px 4px 4px ;">
                                    <span style="color:#F44831; position: relative; top: 19px;left: 205px;">
                                        <span style="font-size: 18px;">总计：</span>
                                        <span style="font-size: 24px;"> ${orderMsg.price}元</span>
                                    </span>
                                    <div class="refund-button" style="width:160px;height: 46px;line-height:46px;background:#F44831;border-radius:4px;text-align: center;font-size:16px;color:rgba(255,255,255,1);margin:50px auto;">申请退款</div>
                                </div>
                                `
                        $('.detail-box').html(html);

                        $('.loading').css('display', 'none');
                    }
                }).catch((err) => {
                    console.log(err);
                })

            //点击弹出付款二维码
            $('.detail-box').on('click', '.refund-button', function () {
                $('.refund-code').css('display', 'block');
            })

            //点击关闭二维码窗口
            $('.close-button').click(function () {
                $('.refund-code').css('display', 'none');
            })

            //生成退款二维码
            // 生成二维码
            var qrcode = new QRCode(document.getElementById("qrcode"), {
                width: 236,
                height: 230
            })
            qrcode.makeCode(orderID)
        }

    </script>
</body>

</html>